<template>
	<view class="content">
		<view class="tab">
			<view :class="['list',status==0?'active':'']" @tap="checktab('')">全部</view>
			<view :class="['list',status=='have'?'active':'']" @tap="checktab('have')">待报价</view>
			<view :class="['list',status=='completed'?'active':'']" @tap="checktab('completed')">已报价</view>
		</view>
		<view class="listbox" v-for="(item,index) in inquiryList" :key="index">
			<view class="item">
				<view class="code">
					<text>询价单号  {{item.enquiry_num}}</text>
				</view>
				<view class="list status">
					<text class="name">询价单状态</text>
					<text v-if="item.status=='await'">待询价</text>
					<text v-else-if="item.status=='have'">待报价</text>
					<text v-else-if="item.status=='completed'">审批中</text>
					<text v-else-if="item.status=='approval'">审批中</text>
					<text v-else-if="item.status=='passed'">已中标</text>
					<text v-else-if="item.status=='declined'">未中标</text>
				</view>
				<view v-for="g in item.goods">
					<view class="list">
						<text class="name">商品名称</text>
						<text>{{g.spu_name}}</text>
					</view>
					<view class="list">
						<text class="name">运输单价</text>
						<text>{{g.freight_price}}</text>
					</view>
					<view class="list">
						<text class="name">运输数量</text>
						<text>{{g.quantity}}</text>
					</view>
				</view>
				<view class="list">
					<text class="name">截止有效时间</text>
					<text>{{item.quotation_exp_date}}</text>
				</view>
			</view>
			<view class="btnbox">
				<navigator class="btn" :url="'./sign?id='+item.id" hover-class="none" v-if="item.status=='completed'">
					重新报价</navigator>
				<navigator class="btn" :url="'./sign?id='+item.id" hover-class="none"
					v-if="item.status=='await'||item.status=='have'">报价</navigator>
				<navigator class="btn" :url="'./info?id=' + item.id" hover-class="none">查看详情</navigator>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<view class="uni-input-wrapper ipt">
					<input placeholder-class="input-style" placeholder="请输入询价单编号" v-model="search" />
					<uni-icons type="clear" size="24" color="#c0c4cc" v-if="search!=''"
						@click="search = ''"></uni-icons>
				</view>
				<uni-data-select v-model="project" :localdata="range" placeholder="请选择项目"
					style="margin-bottom: 20rpx;"></uni-data-select>
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="searchList">搜索</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		transportList,
		getProjectList
	} from '../../network/inquiry.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const status = ref('')
	onNavigationBarButtonTap(() => {
		showPopup.value = true
		getProject()
	})
	onShow(() => {
		inquiryList.length = []
		getList()
	})
	const inquiryList = reactive([])
	const checktab = (val) => {
		inquiryList.length = 0
		status.value = val
		getList()
	}
	const getList = () => {
		let data = {
			status: status.value,
			project_id: project.value,
			enquiry_num: search.value,
			start_date: startDate.value,
			end_date: endDate.value
		}
		transportList(data).then(res => {
			let arr = res.data.data.sort(function(a, b) {
				return new Date(b.createTime) - new Date(a.createTime)
			})
			Object.assign(inquiryList, arr)
		})
	}
	const getProject = () => {
		getProjectList().then(res => {
			res.data.data.map((item, index) => {
				item.text = item.project_name
				item.value = item.id
			})
			Object.assign(range, res.data.data)
		})
	}
	const showPopup = ref(false)
	const range = reactive([])
	const search = ref('')
	const project = ref('')
	const close = () => {
		showPopup.value = false
	}
	const searchList = () => {
		inquiryList.length = 0
		getList()
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		project.value = ''
		startDate.value = ''
		endDate.value = ''
		inquiryList.length = 0
		getList()
		showPopup.value = false
	}
</script>

<style lang="scss">
	.tab {
		width: 100%;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;

		.list {
			width: 33%;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			background-color: #fff;
		}

		.active {
			background-color: #ffc400;
		}
	}

	.listbox {
		border: 2rpx solid #f7f7f7;
	}

	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}

		.goods {
			padding: 10rpx 60rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			background-color: #f7f7f7;
		}
	}

	.btnbox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 0 20rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;

		.btn {
			height: 50rpx;
			width: 160rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			border-radius: 10rpx;
		}
	}

	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;

		.box {
			width: 100%;
			height: 450rpx;
			background-color: #fff;
			padding: 60rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;

			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
				color: #333;
			}

			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 28rpx;
				}

				.search {
					background-color: #ffc400;
				}
			}
		}
	}

</style>